<template>
  <div>
    <div class="box">
      <div class="head">
        <span style="font-size: 16px; font-weight: bold;">文章分类管理</span>
      </div>
      <el-table
        :data="tableData"
        border
        v-loading="isTableLoading"
        empty-text="暂无数据"
        style="width: 100%"
        :max-height="tableHeight"
      >
        <el-table-column fixed type="index" align="center" label="序号" width="60" />
        <el-table-column prop="type_name" align="center" label="分类名称" min-width="200" />
        <el-table-column prop="sort" align="center" label="排序值" width="120" />
        <el-table-column prop="id" align="center" label="分类ID" width="100" />
      </el-table>
    </div>
  </div>
</template>

<script>
import { ArticleTypes } from '@/api/manage';

export default {
  name: 'articleCategory',
  data() {
    return {
      tableHeight: 500,
      isTableLoading: false,
      tableData: [],
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.tableHeight = window.innerHeight - 260;
    });
    this.getList();
  },
  methods: {
    getList() {
      this.isTableLoading = true;
      ArticleTypes().then((res) => {
        this.tableData = res.data.list;
        this.isTableLoading = false;
      }).catch(() => {
        this.isTableLoading = false;
      });
    },
  },
};
</script>

<style scoped>
.head {
  width: 100%;
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
.box {
  width: 100%;
  background: #ffffff;
  border-radius: 5px;
  padding: 20px;
}
</style> 